<!--
 * @Author: 孙开源 && sunkaiyuan@namenode.cn
 * @Date: 2023-11-10 10:34:52
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-11-12 14:28:37
 * @Description: 
 * 
-->
<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="1024"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
      label-position="left"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label><span style="font-weight: 700">附件</span></template>
            <sk-upload v-model="form.attachments" :limit="3" draggable tip="合同等内容">
            </sk-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-descriptions :column="4" border label-align="right" title="基本信息">
        <el-descriptions-item min-width="80" label-class-name="light-blue">
          <template #label>姓名</template>
          <div class="width100">
            <el-input v-model="form.name"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>性别</template>
          <div class="width100">
            <skDicSelect v-model="this.form.sex_id" :code="'sex'"></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>籍贯</template>
          <div class="width100">
            <el-input v-model="form.household_register"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>身份证</template>
          <div class="width100">
            <el-input v-model="form.idcard"></el-input>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>户籍地</template>
          <div class="width100">
            <el-input v-model="form.address"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>现居地</template>
          <div class="width100">
            <el-input v-model="form.live_address"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>婚姻状况</template>
          <div class="width100">
            <skDicSelect v-model="this.form.marriage_id" :code="'Marriage'"></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>已育状况</template>
          <div class="width100">
            <skDicSelect v-model="this.form.children_id" :code="'Children'"></skDicSelect>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>学历</template>
          <div class="width100">
            <skDicSelect
              v-model="this.form.education_id"
              :code="'Education'"
            ></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>专业</template>
          <div class="width100">
            <el-input v-model="form.major"></el-input>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>开户行</template>
          <div class="width100">
            <el-input v-model="form.bank"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>卡号</template>
          <div class="width100">
            <el-input v-model="form.bank_card"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>支行</template>
          <div class="width100">
            <el-input v-model="form.sub_bank"></el-input>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>紧急联系人</template>
          <div class="width100">
            <el-input v-model="form.contactor"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>联系人关系</template>
          <div class="width100">
            <skDicSelect
              v-model="this.form.contactor_relation_id"
              :code="'Relation'"
            ></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>联系人电话</template>
          <div class="width100">
            <el-input v-model="form.contactor_phone"></el-input>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" border label-align="right" title="入职信息">
        <el-descriptions-item min-width="80" label-class-name="light-blue">
          <template #label>部门</template>
          <div class="width100">
            <skAutoChoose
              :name="'department'"
              v-model="this.form.department.name"
              @select="departmentchoose"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80" label-class-name="light-blue">
          <template #label>岗位</template>
          <div class="width100">
            <skDicSelect
              v-model="this.form.position_id"
              :code="'position'"
              :editsource="'other'"
            ></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80" label-class-name="light-blue">
          <template #label>班次</template>
          <div class="width100">
            <skDicSelect
              v-model="this.form.shift_id"
              :code="'shift'"
              :editsource="'other'"
            ></skDicSelect>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80" label-class-name="light-blue">
          <template #label>电话</template>
          <div class="width100">
            <el-input v-model="form.phone"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>入职日期</template>
          <div class="width100">
            <el-date-picker
              v-model="form.entry_date"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>介绍人</template>
          <div class="width100">
            <el-input v-model="form.introducer"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>试用期</template>
          <div class="width100">
            <el-input v-model="form.probationary_period"
              ><template #suffix><span>月</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>试用薪资</template>
          <div class="width100">
            <el-input v-model="form.probationary_salary"></el-input>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>合同到期</template>
          <div class="width100">
            <el-date-picker
              v-model="form.contract_end_date"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>基本工资</template>
          <div class="width100">
            <el-input v-model="form.base_salary">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>计件工资</template>
          <div class="width100">
            <el-input v-model="form.piece_rate_salary">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>绩效</template>
          <div class="width100">
            <el-input v-model="form.perf_based_salary">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>交通补贴</template>
          <div class="width100">
            <el-input v-model="form.traffic_subsidies">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>通讯补贴</template>
          <div class="width100">
            <el-input v-model="form.communication_subsidies">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>住房补贴</template>
          <div class="width100">
            <el-input v-model="form.housing_subsidies">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>其他补贴</template>
          <div class="width100">
            <el-input v-model="form.other_subsidies">
              <template #suffix><span>￥</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>社保个人</template>
          <div class="width100">
            <el-input v-model="form.security_person">
              <template #suffix><span>%</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>社保公司</template>
          <div class="width100">
            <el-input v-model="form.security_company">
              <template #suffix><span>%</span></template></el-input
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>公积金个人</template>
          <div class="width100">
            <el-input v-model="form.fund_person">
              <template #suffix><span>%</span></template>
            </el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>公积金公司</template>
          <div class="width100">
            <el-input v-model="form.fund_company">
              <template #suffix><span>%</span></template></el-input
            >
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>开启账号</template>
          <div class="width100">
            <el-switch
              v-model="form.en_account"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </div>
        </el-descriptions-item>

        <el-descriptions-item min-width="80">
          <template #label>用户名</template>
          <div class="width100">
            <el-input
              v-model="form.username"
              placeholder="默认员工姓名"
              :disabled="form.en_account == 0"
            ></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>密码</template>
          <div class="width100">
            <el-input
              v-model="form.password"
              placeholder="默认手机后六位"
              :disabled="form.en_account == 0"
            >
            </el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item min-width="80">
          <template #label>面试记录</template>
          <div class="width100">
            <el-input v-model="form.interview_record"></el-input>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose },
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增用户",
        edit: "编辑用户",
        show: "查看",
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        department: {},
        attachments: [],
        en_account: 0,
      },
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入真实姓名" }],
        department_id: [{ required: true, message: "请选择部门" }],
      },
      //所需数据选项
    };
  },
  mounted() {},
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    departmentchoose(data) {
      this.form.department_id = data.id;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.isSaveing = true;
          this.$API.comprehensive.employee.save
            .post(this.form)
            .then((res) => {
              if (res.code == 200) {
                this.$emit("success", this.form, this.mode);
                this.visible = false;
                this.$message.success("操作成功");
              }
            })
            .finally(() => {
              this.isSaveing = false;
            });
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, this.$TOOL.removeNull(data));
    },
  },
};
</script>

<style>
.el-descriptions__content .el-date-editor.el-input,
.el-descriptions__content .el-date-editor.el-input__wrapper {
  width: 100%;
}

.el-descriptions__content .clear-icon {
  margin: 0;
  width: 0;
}
</style>
